<template>
  <view class="feedback">

    <intake-nav-bar title="投诉反馈" :fixed="true" />
    <view class="_feedback">
      <view class="input-area">
        <view class="label">请在此描述您遇到的问题:</view>
        <textarea class="textarea" v-model="content" maxlength="200" placeholder="请在此处输入"
          placeholder-style="color: #999999;" />
      </view>
      <view class=" input-area  ">
        <view class="label w100  ">手机号:</view>
        <input class="input width100" v-model="phone" placeholder="输入手机号后期给您回电" placeholder-style="color: #999999;"
          type="number" maxlength="11" />
      </view>
      <view class="notice">
        <text class="notice-text">尊敬的客户：</text>
        <text class="notice-content">
          感谢您选择回馈意见来开启对至高反馈。对于您业内不佳的体验，我们以以最诚挚的歉意。
          每一份投诉都是我们改善服务的动力，已安排服务专员在7个工作日内与您深度沟通。第1轮、48小时内沟通最佳联系，根据您的诉求定制解决方案，全程透明化处理进进度同步。
        </text>
        <text class="notice-sign">国润甄泉客户关怀中心</text>
      </view>
    </view>
    <view class="submit-area">
      <button class="submit-btn" type="primary" @click="handleSubmit">提交</button>
    </view>

  </view>
</template>

<script>
import { saveComplaints } from "@/api/public";

export default {
  data() {
    return {
      content: "",
      phone: "",
    };
  },
  methods: {
    handleSubmit() {
      if (!this.content.trim()) {
        uni.showToast({
          title: '请输入反馈内容',
          icon: 'none'
        });
        return;
      }
      if (!this.phone || !/^1\d{10}$/.test(this.phone)) {
        uni.showToast({
          title: '请输入正确的手机号',
          icon: 'none'
        });
        return;
      }
      // 提交逻辑
      saveComplaints({ content: this.content, phone: this.phone }).then(res => {
        this.content = '';
        this.phone = '';
        if (res.status === 0) {
          uni.showToast({
            title: '提交成功',
            icon: 'none'
          });
          setTimeout(() => {
            uni.reLaunch({
              url: '/pages/index/home'
            });
          }, 2000);
        }
      })
    }
  }
}
</script>

<style lang="scss">
.feedback {
  background: url($baseUrl + '/images/bg/user_bg@2x.png') no-repeat center / 100% 100%;
  width: 100%;
  height: 100vh;
  /* 使用视口高度，确保元素高度充满整个屏幕 */
  //display: flex;
  justify-content: center;
  background-size: cover;
  /* 使背景图片覆盖整个元素 */
  padding: 0 30rpx;

  ._feedback {
    flex: 1;

    .input-area,
    .phone-area {
      background-color: #ffffff;
      border-radius: 8px;
      padding: 30rpx;
      margin-bottom: 30rpx;

      .label {
        font-size: 14px;
        color: #333333;
        margin-bottom: 20rpx;
      }

      .textarea {
        width: 100%;
        height: 280rpx;
        font-size: 14px;
        line-height: 1.5;
        color: #333333;
      }
    }

    .notice {
      background-color: #ffffff;
      border-radius: 8px;
      padding: 30rpx;

      .notice-text {
        display: block;
        font-size: 14px;
        color: #333333;
        margin-bottom: 20rpx;
      }

      .notice-content {
        display: block;
        font-size: 21rpx;
        color: #86909C;
        ;
        line-height: 1.6;
        margin-bottom: 20rpx;
      }

      .notice-sign {
        display: block;
        font-size: 14px;
        color: #999999;
        text-align: right;
      }
    }
  }
}
</style>
